<template>
  <div id="capacityModification">
    <el-form ref="capacityMessage" :model="form.data" label-width="140px" label-position="left" :inline="true" :rules="rules">
      <el-form-item label="最小实例数" prop="min_instance_number">
        <el-input v-model.number="form.data.min_instance_number" />
      </el-form-item>
      <el-form-item label="最大实例数" prop="max_instance_number">
        <el-input v-model.number="form.data.max_instance_number" />
      </el-form-item>
    </el-form>
  </div>
</template>
<style lang="scss" scoped>
  #capacityModification {
    .el-form-item {
      margin-bottom: 30px;
    }
    .el-input {
      width: 280px;
      font-size: 12px;
    }
  }
</style>
<script lang="ts" setup>
  import appStore from '@/store'
  import Vue, { ref, reactive, watch } from 'vue'
  import { ElMessage, FormInstance, FormRules } from 'element-plus'
  import FleetsService, { FleetCapacityMsg, UpdateFleetInstanceCapacityRequest } from '@/api/fleetsService'
  import fleetDetails, { ProcessParamType } from '@/api/fleetDetails'
  import { ElMessageBox } from 'element-plus'

  const capacityMessage = ref<FormInstance>()

  let formData = reactive({
    min_instance_number: 0,
    max_instance_number: 0
  })

  let form = reactive({
    data: formData
  })

  const emits = defineEmits(['close', 'get'])
  const props = defineProps(['fleetId'])
  let fleet_id = props.fleetId

  watch(
    () => props.fleetId,
    (newValue, oldValue) => {
      fleet_id = newValue
    }
  )

  const submitForm: FleetCapacityMsg = {
    project_id: appStore.userStore.project_id,
    fleet_id: fleet_id,
    UpdateFleetInstanceCapacityRequestBody: form.data as UpdateFleetInstanceCapacityRequest
  }

  const getFleet: ProcessParamType = {
    project_id: appStore.userStore.project_id,
    fleet_id: fleet_id
  }

  const getFleetCapacity = async () => {
    let res = await fleetDetails.getInstanceCap(getFleet)
    form.data.min_instance_number = res.data.instance_capacity.min_instance_number
    form.data.max_instance_number = res.data.instance_capacity.max_instance_number
  }
  const submit = async () => {
    submitForm.UpdateFleetInstanceCapacityRequestBody.desired = submitForm.UpdateFleetInstanceCapacityRequestBody.min_instance_number
    let res = await FleetsService.updateCapacity(submitForm)
    if (res.status === 204) {
      ElMessage({
        message: '修改成功！',
        type: 'success'
      })
      emits('get')
      emits('close')
    }
  }
  const onSubmit = async () => {
    var capacityMessageValid = await capacityMessage.value?.validate((valid) => {
      return valid
    })
    if (capacityMessageValid) {
      ElMessageBox.confirm('请确定保存修改吗？', '温馨提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          submit()
        })
        .catch(() => {})
    }
  }
  defineExpose({ onSubmit })

  const portValidate = (rule: any, value: any, callback: any) => {
    if (form.data.min_instance_number <= form.data.max_instance_number) {
      callback()
    } else {
      if (rule.field == 'min_instance_number') {
        callback(new Error('最小实例数应小于等于最大实例数'))
      } else if (rule.field == 'max_instance_number') {
        callback(new Error('最大实例数应大于等于最小实例数'))
      }
    }
  }

  const rules = reactive<FormRules>({
    min_instance_number: [
      { required: true, type: 'number', message: '请输入最小实例数', trigger: 'blur' },
      { validator: portValidate, trigger: 'blur' }
    ],
    max_instance_number: [
      { required: true, type: 'number', message: '请输入最大实例数', trigger: 'blur' },
      { validator: portValidate, trigger: 'blur' }
    ]
  })

  getFleetCapacity()
</script>
